<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <div id="app">
        <!-- if 条件渲染 -->
        <p v-if="show">You can see me! <span>Hello!</span></p>
        <p v-else>Now you see me!</p>
        <template v-if="show">
            <h1>Heading</h1>
            <p>Inside a template</p>
        </template>
        <p v-show="show">Do you also see me?</p>
        <button v-on:click="show = !show">Switch</button>

        <!-- for 列表渲染 -->
        <!-- key https://cn.vuejs.org/v2/guide/list.html#key -->
        <ul>
            <li v-for="(ingredient, i) in ingredients" v-bind:key="i">{{ ingredient }} ({{ i }})</li>
        </ul>
        <ul>
            <li v-for="person in persons">
                <div v-for="(value, key, index) in person" v-bind:key="index">{{ key }}: {{ value }} ({{ index }})</div>
            </li>
        </ul>
        <!-- Looping through a List of Numbers -->
        <span v-for="n in 10">{{ n }}</span>
    </div>

    <script>
        new Vue({
            el: '#app',

            data: {
                show: true,

                ingredients: ['meat', 'fruit', 'cookies'],

                persons: [
                    {name: 'Max', age: 27, color: 'red'},
                    {name: 'Anna', age: 'unkown', color: 'blue'},
                ],
            },
        });
    </script>
</body>
</html>
